<template>
  <div class="menu-list">
    <div class="info-empty" v-if="isEmpty">
      <!-- 作品 -->
      <div v-if="activeTab === 'works'">
        <p>私房菜不要偷偷享用哦~~制作成菜谱与大家分享吧！</p>
        <a href="">发布菜单</a>
      </div>

      <!-- 收藏 -->
      <div v-else>
        <p>还没有收藏任何的菜谱，去搜自己喜欢的菜谱，收藏起来吧。</p>
        <a href="">菜谱大全</a>
      </div>
    </div>

    <menu-card :marginLeft="13" :info="list"></menu-card>
  </div>
</template>

<script>
import MenuCard from "@/components/menu-card.vue";
export default {
  props: ["list", "activeTab"],

  data() {
    return {
      isEmpty: true,
    };
  },

  components: {
    MenuCard,
  },

  watch: {
    list: {
      handler() {
        this.isEmpty = this.list?.length === 0;
      },
    },
  },
};
</script>

<style>
.info-empty a {
  text-align: center;
  display: block;
  height: 48px;
  width: 200px;
  line-height: 48px;
  font-size: 14px;
  background-color: #ff3232;
  color: #fff;
  font-weight: bold;
  margin: 0 auto;
}
</style>